<template>
  <div id="vedioPlay">
    <el-container>
      <el-header style="height: 100%;">
        <el-container>
          <el-header style="height: 100%;">
            <Xgplayer :config="config" @player="Player = $event" />
          </el-header>
          <el-main>
            <div class="vdTitle">
              <div class="bigT">
                <span>{{bigTitle}}</span>
              </div>
              <div class="mess">
                <div class="mess1">
                  <span>主演:{{actor}}</span>
                </div>
                <div class="mess1">
                  <span>导演:{{director}}</span>
                </div>
                <div class="mess1">
                  <span>地区:{{local}}</span>
                </div>
                <div class="mess1">
                  <span>上映时间:{{time}}</span>
                </div>
              </div>
            </div>
            <el-card class="box-card" shadow="never">
              <el-row :gutter="20">
                <div v-for="o in 18" :key="o">
                  <el-col :span="2">
                    <div class="grid-content bg-purple">
                      <el-button class="btn">{{'第'+o+'集'}}</el-button>
                    </div>
                  </el-col>
                </div>
              </el-row>
            </el-card>
          </el-main>
        </el-container>
      </el-header>
      <el-main style="height: 100%;">
        <div class="bigT1">
          <span>猜你喜欢</span>
        </div>
        <el-row :gutter="20" style="margin-left:0px;margin-right: 0px;">
          <el-col :span="6" v-for="(o, index) in 4" :key="o">
            <el-card :body-style="{ padding: '0px' }" shadow="never">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                class="image">
              <div style="padding: 10px;">
                <el-link :underline="false">铁血战士</el-link>
                <div class="bottom clearfix">
                  <span>美国科幻大作</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="mess2">
          <span>登录</span>
          <el-divider direction="vertical"></el-divider>
          <span>注册</span>
        </div>
        <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入内容" v-model="textarea"
          maxlength="300" show-word-limit style="margin-top: 5px;">
        </el-input>
        <el-button type="primary" round style="float: right;margin-top: 10px;">发表评论</el-button>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin-top: 60px;">
          <el-menu-item index="1">全部评论</el-menu-item>
        </el-menu>
        <div v-for="(talk,index) in 5" :key="index">
          <div class="takk">
            <el-avatar :size="50" :src="circleUrl" style="float: left;width: 3%; margin-left: 10px;"></el-avatar>
            <div class="tak">
              <el-link :underline="false"><span style="width: 100%;color: red;font-size: 12px;">飞翔1003</span></el-link>
              <span style="float: left;width: 100%;font-size: 20px;margin-top: 5px;">xxxxxsdsdsd</span>
            </div>
            <div class="takIco">
              <span>2019-8-14 16:13</span>
              <i class="el-icon-chat-dot-round"></i>
            </div>
          </div>
          <el-divider></el-divider>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1"
          :page-size="100" layout="total, prev, pager, next" :total="1000">
        </el-pagination>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  import Xgplayer from 'xgplayer-vue';
  export default {
    data() {
      return {
        config: {
          id: 'vs',
          url: 'sssss',
          fluid: true,
          whitelist: [
            ""
          ],
          autoplay: true,
          autoplayMuted: true,
          width: 600,
          height: 337.5,
          volume: 0.6,
        },
        Player: null,
        bigTitle: '复仇者联盟',
        actor: '主演A',
        director: '导演A',
        local: '欧美',
        time: '2017-01-01',
        textarea: '',
        activeIndex: '1',
        circleUrl: '',
        currentPage1: 5,
      }
    },
    components: {
      Xgplayer
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }

  }
</script>

<style>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
    margin-top: 15px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .btn {
    width: 100%;
  }

  .vdTitle {
    height: 130px;
    margin-bottom: 20px;
    margin-left: 5px;
  }

  .bigT {
    font-size: 30px;
    float: left;
    width: 100%;
  }

  .mess {

    font-size: 15px;
  }

  .mess1 {
    margin-top: 5px;
    float: left;
    width: 100%;
  }

  .bigT1 {
    font-size: 30px;
    float: left;
    width: 100%;
    margin-left: 10px;
  }

  .mess2 {
    font-size: 12px;
    float: left;
    margin-left: 20px;
    width: 50%;
  }

  .takk {
    margin-top: 10px;
    height: 50px;
  }

  .tak {
    float: left;
    margin-left: 10px;
  }

  .takIco {
    float: right;
    margin-top: 28px;
  }
</style>
